<template>
  <div class="otc-ordinary-box main">
    <div class="main-body">
      <div class="max-w">
        <div class="main-content">
          <div class="the-text">
            <p class="ttile1 fit-tc-primary">{{ currCoinLangFun("ordinary_title") }}</p>
            <p class="ttile2 fit-tc-tip">{{ currCoinLangFun("ordinary_aqgxgm") }}</p>
            <!-- <div class="ttile3 fit-tc-tip">
              <span>如若购买其他数字资产, 请前往场外合作平台</span>
              <span class="link fit-tc-tertiary active-text">
                LinkCoin
                <i class="el-icon-top-right"></i>
              </span>
            </div>-->
            <div class="coinImg">
              <!-- <span></span>
              <span></span>
              <span></span>
              <span></span>-->
            </div>
            <p class="title4 fit-tc-primary">{{ currCoinLangFun("ordinary_fdhbhszb") }}</p>
            <p class="title5 fit-tc-tip">{{ currCoinLangFun("ordinary_advantage") }}</p>
            <div class="instructions">
              <div
                class="instructions-btn fit-background-di fit-tc-primary active-text"
                @click="textClickFun('syxz')"
              >{{ currCoinLangFun("text_use_Instructions", "article") }}</div>
              <div
                class="instructions-btn fit-background-di fit-tc-primary active-text"
                @click="textClickFun('aqgfzd')"
              >{{ currCoinLangFun("text_aqgfzd", "article") }}</div>
            </div>
          </div>
          <div>
            <div class="buy-main">
              <div class="buy-top-title" v-if="isLogin">
                <span
                  class="right fit-tc-primary active-text"
                  @click="$router.push('/otc/order?serviceType=1')"
                >
                  <i class="el-icon-document"></i>
                  {{ currCoinLangFun("text_order_records", "all") }}
                </span>
              </div>
              <div class="type-symbol">
                <div
                  class="tab-btn fit-tc-tip"
                  :class="{ disactive: orderType != 'buy' }"
                  @click="serOrderType('buy')"
                >
                  <span>
                    {{
                    currCoinLangFun("wanta_buy_text", "buy_coins_relevant")
                    }}
                  </span>
                </div>
                <div
                  class="tab-btn fit-tc-tip"
                  :class="{ disactive: orderType != 'sell' }"
                  @click="serOrderType('sell')"
                >
                  <span>
                    {{
                    currCoinLangFun("wanta_sell_text", "buy_coins_relevant")
                    }}
                  </span>
                </div>
              </div>
              <div class="order-inputs">
                <div class="order-inputs-main">
                  <div class="input-box source">
                    <p class="fit-tc-tip title">
                      {{
                      orderType == "buy"
                      ? currCoinLangFun("text_need_pay")
                      : currCoinLangFun("text_need_sell")
                      }}
                    </p>
                    <div class="money-input">
                      <input
                        type="number"
                        onkeypress="return (/[^-^e^+]/.test(String.fromCharCode(event.keyCode)))"
                        :class="{
                          'input-ontology': true,
                          'input-error': false,
                        }"
                        placeholder="0.00"
                        v-model="sourceValue"
                        @input="sourceValChangeFun(sourceValue)"
                      />
                      <div class="equivalent">
                        <span class="box-line"></span>
                        <el-dropdown
                          class="otc-el-dropdown"
                          trigger="click"
                          @command="chooseSource"
                          @visible-change="ifChooseSource = !ifChooseSource"
                        >
                          <span class="el-dropdown-link">
                            <img
                              class="fit-ta-border-color"
                              v-if="currSource.icon"
                              :src="currSource.icon"
                            />
                            <span class="label fit-tc-primary">{{ currSource.label }}</span>
                            <i
                              class="fit-tc-primary otc-symbol-icon el-icon-caret-bottom"
                              :class="{
                                transform: ifChooseSource,
                              }"
                            ></i>
                          </span>
                          <el-dropdown-menu slot="dropdown" v-if="filterSource.length">
                            <div style="padding: 0 15px">
                              <el-input
                                clearable
                                prefix-icon="el-icon-search"
                                v-model="screenSourceInput"
                                @input="screenSourceChange"
                              ></el-input>
                            </div>

                            <template v-for="item in filterSourceSearch">
                              <el-dropdown-item :key="item.value" :command="item">
                                <img :src="item.icon" alt />
                                <span
                                  class="fit-tc-primary"
                                  :class="{
                                    active: currSource.value == item.value,
                                  }"
                                >{{ item.label }}</span>
                              </el-dropdown-item>
                            </template>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                      <div>
                        <div
                          v-if="orderType == 'sell'"
                          class="tip-text fit-tc-primary"
                          style="display: flex; justify-content: space-between"
                          :class="{ 'error-text': !AmountCheck }"
                        >
                          <span>
                            {{ currCoinLangFun("text_available_balance") }}：
                            {{ computeSurplusNum(currSource.surplusNum || "")
                            }}{{ ` ${currSource.label || ""}` }}
                          </span>
                          <span
                            style="color: #0020FD; cursor: pointer"
                            @click.stop="transferDialog = true"
                          >{{currCoinLangFun('transfer_text','all')}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="input-box target">
                    <p class="fit-tc-tip title">{{ currCoinLangFun("text_will_get") }}</p>
                    <div class="money-input">
                      <input
                        type="number"
                        onkeypress="return (/[^-^e^+]/.test(String.fromCharCode(event.keyCode)))"
                        :class="{
                          'input-ontology': true,
                        }"
                        placeholder="0.00"
                        v-model="targetValue"
                        @input="targetValChangeFun(targetValue)"
                      />
                      <div class="equivalent">
                        <span class="box-line"></span>
                        <el-dropdown
                          class="otc-el-dropdown"
                          trigger="click"
                          @command="chooseTarget"
                          @visible-change="ifChooseTarget = !ifChooseTarget"
                        >
                          <span class="el-dropdown-link">
                            <img
                              class="fit-ta-border-color"
                              v-if="currTarget.icon"
                              :src="currTarget.icon"
                            />
                            <span class="label fit-tc-primary">{{ currTarget.label }}</span>
                            <i
                              class="fit-tc-primary otc-symbol-icon el-icon-caret-bottom"
                              :class="{
                                transform: ifChooseTarget,
                              }"
                            ></i>
                          </span>
                          <el-dropdown-menu slot="dropdown" v-if="filterTarget.length">
                            <div style="padding: 0 15px">
                              <el-input
                                clearable
                                prefix-icon="el-icon-search"
                                v-model="screenTargetInput"
                                @input="screenTargetChange"
                              ></el-input>
                            </div>
                            <template v-for="item in filterTargetSearch">
                              <el-dropdown-item :key="item.value" :command="item">
                                <img :src="item.icon" alt />
                                <span
                                  class="fit-tc-primary"
                                  :class="{
                                    active: currTarget.value == item.value,
                                  }"
                                >{{ item.label }}</span>
                              </el-dropdown-item>
                            </template>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                    <div class="text">
                      <span class="fit-tc-primary" v-if="currTarget.label && currSource.label">
                        1{{
                        ` ${
                        orderType == "buy"
                        ? currTarget.label
                        : currSource.label
                        }`
                        }}
                        ≈ {{ computedRate
                        }}{{
                        ` ${
                        orderType == "buy"
                        ? currSource.label
                        : currTarget.label
                        }`
                        }}
                      </span>
                      <span class="fit-tc-tip">
                        {{
                        currCoinLangFun("ordinary_refresh_rule")
                        }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="pay_way" v-if="isLogin">
                  <div class="pay_way_text">
                    <span class="fit-tc-tip">
                      {{
                      orderType == "buy"
                      ? currCoinLangFun("text_pay_way")
                      : currCoinLangFun("text_collection_way")
                      }}
                    </span>
                  </div>
                  <div class="order-ways" v-if="orderType == 'buy'">
                    <div v-if="payWayList.length">
                      <div class="payment-area">
                        <div class="payment-trigger">
                          <div class="otc-dropdown">
                            <el-dropdown
                              trigger="click"
                              @command="choosePayWay"
                              @visible-change="ifChoosePay = !ifChoosePay"
                            >
                              <span
                                class="fit-tc-primary"
                                :class="{
                                  'el-dropdown-link': true,
                                  active: ifChoosePay,
                                }"
                              >
                                <img class="otc-symbol-img" :src="currPayWay.icon" alt />
                                <span class="otc-symbol-name">{{ currPayWay.name || "" }}</span>
                                <i
                                  class="fit-tc-primary otc-symbol-icon el-icon-caret-bottom"
                                  :class="{
                                    transform: ifChoosePay,
                                  }"
                                ></i>
                              </span>
                              <el-dropdown-menu slot="dropdown" class="otc-dropdown-payment">
                                <el-dropdown-item
                                  v-for="item in payWayList"
                                  :key="item.id"
                                  :command="item"
                                >
                                  <img :src="item.icon" alt />
                                  <span
                                    :class="{
                                      active: currPayWay.id == item.id,
                                    }"
                                  >{{ item.name }}</span>
                                </el-dropdown-item>
                              </el-dropdown-menu>
                            </el-dropdown>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="!payWayList.length" class="fit-error none-text">
                      <p>{{ currCoinLangFun("ordinary_no_payway") }}</p>
                    </div>
                  </div>
                  <div class="order-ways" v-if="orderType == 'sell'">
                    <div v-if="filterMyPayMethods.length">
                      <div class="payment-area">
                        <div class="payment-trigger">
                          <div class="otc-dropdown">
                            <el-dropdown
                              trigger="click"
                              @command="chooseSellWay"
                              @visible-change="ifChooseSell = !ifChooseSell"
                            >
                              <span
                                class="fit-tc-primary"
                                :class="{
                                  'el-dropdown-link': true,
                                  active: ifChooseSell,
                                }"
                              >
                                <img class="otc-symbol-img" :src="currSellWay.icon" alt />
                                <span class="otc-symbol-name">{{ currSellWay.name || "" }}</span>
                                <i
                                  class="fit-tc-primary otc-symbol-icon el-icon-caret-bottom"
                                  :class="{
                                    transform: ifChooseSell,
                                  }"
                                ></i>
                              </span>
                              <el-dropdown-menu slot="dropdown" class="otc-dropdown-payment">
                                <el-dropdown-item
                                  v-for="item in filterMyPayMethods"
                                  :key="item.pay_method_id"
                                  :command="item"
                                >
                                  <img :src="item.icon" alt />
                                  <span
                                    :class="{
                                      active:
                                        currSellWay.pay_method_id ==
                                        item.pay_method_id,
                                    }"
                                  >{{ item.name }}</span>
                                </el-dropdown-item>
                              </el-dropdown-menu>
                            </el-dropdown>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="commom-che" v-if="!filterMyPayMethods.length">
                      <div style="font-size: 12px">
                        <div class="fit-tc-tip" v-if="filterMyPayMethodsErr == 1">
                          <span>{{ currCoinLangFun("ordinary_skfsbzc") }}</span>
                          <span
                            style="cursor: pointer"
                            class="fit-tc-tertiary active-text"
                            @click="
                              $router.push({
                                path: '/account/center/info',
                              })
                            "
                          >{{ currCoinLangFun("user_center", "user") }}</span>
                          {{ currCoinLangFun("text_change_payway") }}
                        </div>
                        <!--  -->
                        <div class="fit-tc-tip" v-if="filterMyPayMethodsErr == 2">
                          <span>
                            {{
                            currCoinLangFun("nhmyskfs_qqw_tips")
                            }}
                          </span>
                          <span
                            style="cursor: pointer"
                            class="fit-tc-tertiary active-text"
                            @click="
                              $router.push({
                                path: '/account/center/info',
                              })
                            "
                          >{{ currCoinLangFun("user_center", "user") }}</span>
                          {{ currCoinLangFun("text_tj", "move_quotation") }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pay-button">
                  <el-button
                    class="loginBtn"
                    type="success"
                    v-if="!isLogin"
                    @click="
                      $router.push({
                        path: `/user/login`,
                      })
                    "
                  >{{ currCoinLangFun("login", "top") }}</el-button>
                  <div v-if="orderType == 'buy' && isLogin">
                    <el-button
                      class="loginBtn"
                      type="success"
                      @click="buyCoin"
                      :loading="orderBooking"
                      :disabled="!sourceValue"
                    >
                      {{ currCoinLangFun("text_buy", "all")
                      }}{{ ` ${currTarget.label || ""}` }}
                    </el-button>
                  </div>
                  <div v-if="orderType == 'sell' && isLogin">
                    <div v-if="myPayMethods.length">
                      <el-button
                        class="loginBtn"
                        type="success"
                        v-if="isLogin"
                        @click="buyCoin"
                        :loading="orderBooking"
                        :disabled="!(AmountCheck && sourceValue)"
                      >
                        {{ currCoinLangFun("text_sell", "all")
                        }}{{ ` ${currSource.label}` }}
                      </el-button>
                    </div>
                    <!-- <el-button
                      class="tjskfsBtn"
                      type="primary"
                      icon="el-icon-circle-plus-outline"
                      plain
                      v-if="!myPayMethods.length"
                      >添加收款方式</el-button
                    >-->
                  </div>
                </div>
              </div>
            </div>
            <div style="padding: 27px 0"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three-steps-box">
      <div class="three-s fit-background-di">
        <div class="max-w">
          <p class="title1 fit-tc-primary">{{ currCoinLangFun("ordinary_steptext1") }}</p>
          <div class="title2">
            <div class="three-min">{{ currCoinLangFun("ordinary_steptext2") }}</div>
            <span class="fit-tc-tip">
              {{
              currCoinLangFun("ordinary_steptext3")
              }}
            </span>
          </div>
          <div class="step-img">
            <div class="step">
              <div class="icon-bg"></div>
              <div class="three-tw">
                <p class="fit-tc-primary">{{ currCoinLangFun("ordinary_steptext4") }}</p>
                <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_steptext5") }}</p>
              </div>
            </div>
            <div class="step">
              <div class="trans-png">
                <img
                  src=""
                  alt
                />
              </div>
              <div class="icon-bg"></div>
              <div class="three-tw">
                <p class="fit-tc-primary">{{ currCoinLangFun("ordinary_steptext6") }}</p>
                <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_steptext7") }}</p>
              </div>
            </div>
            <div class="step">
              <div class="trans-png">
                <img
                  src=""
                  alt
                />
              </div>
              <div class="icon-bg"></div>
              <div class="three-tw">
                <p class="fit-tc-primary">{{ currCoinLangFun("ordinary_steptext8") }}</p>
                <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_steptext9") }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="my-advantage">
        <div class="max-w">
          <p class="title1 fit-tc-primary">{{ currCoinLangFun("ordinary_advantagetext1") }}</p>
          <div class="advantage-detail">
            <div class="detail">
              <div class="icon-bg"></div>
              <p class="fit-tc-primary">{{ currCoinLangFun("ordinary_advantagetext2") }}</p>
              <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_advantagetext3") }}</p>
              <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_advantagetext4") }}</p>
            </div>
            <div class="detail">
              <div class="icon-bg"></div>
              <p class="fit-tc-primary">{{ currCoinLangFun("ordinary_advantagetext5") }}</p>
              <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_advantagetext6") }}</p>
            </div>
            <div class="detail">
              <div class="icon-bg"></div>
              <p class="fit-tc-primary">{{ currCoinLangFun("ordinary_advantagetext7") }}</p>
              <p class="fit-tc-tip">{{ currCoinLangFun("ordinary_advantagetext8") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="currCoinLangFun('ordinary_yjmbzgyz')"
      :visible.sync="goKycDialog"
      width="480px"
      :before-close="handleClose"
      class="goKyc"
    >
      <p class="fit-tc-tip goKyc-tip">{{ currCoinLangFun("ordinary_yjmbwsxx") }}</p>
      <div class="flex-box goKyc-bottom">
        <div class="flex-box left fit-tc-primary">
          <i class="el-icon-postcard"></i>
          <span>{{ currCoinLangFun("ordinary_wcsfrz") }}</span>
        </div>
        <div class="right">
          <el-button
            type="primary"
            size="small"
            class="fit-tc-button"
            @click="goKycFun"
          >{{ currCoinLangFun("text_go_authentication", "user") }}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 划转弹框 -->
    <fund-transfer
      v-if="transferDialog"
      :transferDialog="transferDialog"
      :closeDialog="closeDialog.bind(this)"
      targerWalletKey="wallet"
    ></fund-transfer>

    <!-- 聊天框 -->
    <business-chat-box
      ref="businessChatBox"
      v-if="businessChatDialog"
      :businessChatDialog="businessChatDialog"
      :closeDialog="closeDialog.bind(this)"
      :userInfo="userInfo"
      :orderData="currOrderData"
    ></business-chat-box>
  </div>
</template>

<script>
import fundTransfer from '@/components/wallet/fund-transfer.vue'

import { mapGetters } from 'vuex'
import { getDataApi } from '@/api/system'
import { getCurrencyAccount, getPayment } from '@/api/user.js'
import businessChatBox from '@/components/chat/business-chat-box.vue'
import {
  newCommonOrder,
  getOneClickPayment,
  getOneClickRate,
  getServicePayment,
} from '@/api/otc.js'
import { toThousands, toNorounded, analysisFunction } from '@/util/util'
export default {
  components: { businessChatBox, fundTransfer },
  watch: {
    userVariation: {
      handler(data) {
        if (data.type == 'otc' && data.order == this.currOpenOrderId) {
          //更新当前聊天弹窗状态
          this.upDataBusinessChatBoxFun(data)
        }
      },
      deep: true,
    },
  },
  beforeRouteLeave(to, from, next) {
    //清除定时器
    next()
    if (this.countDownTimer) {
      clearInterval(this.countDownTimer)
    }
  },
  beforeDestroy() {
    // console.log("页面销毁");
    if (this.countDownTimer) {
      clearInterval(this.countDownTimer)
    }
  },
  data() {
    return {
      screenSourceInput: '',
      screenTargetInput: '',

      transferDialog: false, //划转
      currOpenOrderId: '', //当前订单id
      orderType: 'buy', //订单类型：购买buy，出售sell
      orderBooking: false, //下单中 状态
      ifChoosePay: false, //是否在选择支付方式
      ifChooseSell: false, //是否在选择收款方式
      sourceValue: '',
      targetValue: '',
      payWayList: [], //支付方式
      goKycDialog: false,
      currPayWay: {}, //买入时选择的支付方式
      currSellWay: {}, //卖出时的收款方式
      ifChooseSource: false, //正在选择源
      ifChooseTarget: false, //正在选择目标
      currSource: {}, //源
      currTarget: {}, //目标
      countryList: [], //国家列表
      coinList: [], //币种列表
      oneClickData: {}, //服务商数据
      exchangeData: [], //汇率数据
      countDownTimer: null, //刷新汇率数据定时器
      myPayMethods: [], //我的收款方式
      businessChatDialog: false, //商家聊天窗口
      currOrderData: {}, //传入订单数据

      articleCode: {},
      isSkipArticle: false,
    }
  },
  created() {
    //获取我的收款方式
    this.getMyPayMethodsFun()

    getOneClickPayment().then(async (res) => {
      let data = res.data.data[0]
      //服务商信息
      for (let key in data) {
        if (typeof data[key] == 'string') {
          this.oneClickData[key] = data[key]
        }
      }

      //付款方式
      this.payWayList = data.method
      if (this.payWayList.length) {
        this.currPayWay = this.payWayList[0]
      }

      this.countryList = data.country
      this.coinList = data.coin

      await this.getExChangeFun()

      //获取钱包账户余额
      this.getCurrencyAccountFun()
      let sI = -1
      this.filterSource.forEach((item, index) => {
        if (item.local_currency == this.exchangeName) {
          sI = index
        }
      })
      if (sI !== -1) {
        this.currSource = this.filterSource[sI] || {}
      } else {
        this.currSource = this.filterSource[0] || {}
      }
      this.currTarget = this.filterTarget[0] || {}

      if (this.countDownTimer) {
        clearInterval(this.countDownTimer)
      }

      this.countDownTimer = setInterval(() => {
        //获取汇率
        this.getExChangeFun()
      }, 10000)
    })

    //获取文章跳转配置
    getDataApi('1530464853989064705', {
      config_code: 'fast_article',
    }).then((res) => {
      let data = res.data.data.records
      if (data.length > 0) {
        data = data[0]
        try {
          this.articleCode = analysisFunction(
            `function getData(){${data.config_data}}`
          )()

          console.log(this.articleCode)
        } catch (error) {
          console.warn('解析异常', error, data.config_data)
        }
      }
    })
  },
  methods: {
    currCoinLangFun(code, type = 'exchange') {
      return this.coinLangFun(type, code)
    },
    screenSourceChange(e) {
      console.log(e)
    },
    //更新聊天窗口信息
    upDataBusinessChatBoxFun(data) {
      getServicePayment({ orderId: this.currOpenOrderId }).then((res) => {
        this.currOrderData = {
          id: this.currOpenOrderId,
          ...res.data.data,
        }
        setTimeout(() => {
          this.$refs.businessChatBox.countDownFun(data)
        }, 0)
      })
    },
    sourceValChangeFun(val) {
      if (val) {
        if (this.orderType == 'buy') {
          this.targetValue = Number(val).myDiv(Number(this.exchangeNum))
        } else {
          this.targetValue = Number(this.exchangeNum).myMul(Number(val))
        }
      } else {
        this.targetValue = ''
      }
    },
    targetValChangeFun(val) {
      if (val) {
        if (this.orderType == 'buy') {
          this.sourceValue = Number(this.exchangeNum).myMul(Number(val))
        } else {
          this.sourceValue = Number(val).myDiv(Number(this.exchangeNum))
        }
      } else {
        this.sourceValue = ''
      }
    },
    serOrderType(type) {
      //设置订单类型  出售/购买
      if (this.orderType == type) {
        return false
      }

      this.orderType = type
      this.sourceValue = ''
      this.targetValue = ''
      let sI = -1
      this.filterSource.forEach((item, index) => {
        if (item.local_currency == this.exchangeName) {
          sI = index
        }
      })
      if (sI !== -1 && this.orderType == 'buy') {
        this.chooseSource(this.filterSource[sI])
      } else {
        this.chooseSource(this.filterSource[0])
      }

      this.currTarget = {}
      let bool = false
      if (
        this.orderType == 'sell' &&
        this.myPayMethods.length &&
        this.filterTarget.length
      ) {
        this.filterTarget.forEach((item) => {
          this.myPayMethods.forEach((child) => {
            if (child.data && item.value == child.data.country_id) {
              bool = true
              setTimeout(() => {
                this.chooseTarget(item)
              }, 0)
            }
          })
        })
      }
      if (!bool) {
        this.chooseTarget(this.filterTarget[0])
      }
    },
    choosePayWay(obj) {
      //选择支付方式
      this.currPayWay = obj
    },
    chooseSellWay(obj) {
      // console.log(obj);
      //选择收款方式
      this.currSellWay = obj
    },
    closeDialog(type, isRefresh = '') {
      if (type == 'businessChatDialog') {
        this.currOpenOrderId = ''
        this.businessChatDialog = false
        //刷新余额
        this.getCurrencyAccountFun()
      } else if (type == 'transferDialog') {
        this.transferDialog = false
        if (isRefresh == 'refresh') {
          getOneClickPayment().then((res) => {
            let data = res.data.data[0]
            this.coinList = data.coin
            //刷新余额
            this.getCurrencyAccountFun()
            let i = this.filterSource.findIndex(
              (item) => item.id == this.currSource.id
            )
            if (i != -1) {
              this.chooseSource(this.filterSource[i])
            }
          })
        }
      }
    },
    chooseSource(data) {
      this.currSource = data
      this.sourceValue = ''
      this.targetValue = ''
    },
    chooseTarget(data) {
      this.currTarget = data
      this.sourceValue = ''
      this.targetValue = ''
      //清除已选中收款方式
      this.currSellWay = {}

      if (this.orderType == 'sell') {
        if (this.filterMyPayMethods.length) {
          this.currSellWay = this.filterMyPayMethods[0]
        }
      }
      // console.log(this.currTarget);
    },
    //获取所有收款方式
    getMyPayMethodsFun() {
      if (!this.isLogin) {
        return false
      }
      getDataApi('1541709245688348673', {
        pageSize: '-521',
        enable: 1,
      }).then((res) => {
        this.myPayMethods = res.data.data.records
        if (this.myPayMethods.length) {
          this.getPaymentFun()
        }
      })
    },
    //获取我的收款方式
    getPaymentFun() {
      getPayment().then((res) => {
        let payment = res.data.data
        if (payment.length) {
          this.myPayMethods = this.myPayMethods.map((item) => {
            payment.forEach((child) => {
              if (item.id == child.pay_method_id) {
                item.data = child
              }
            })
            return item
          })
          this.currSellWay = this.myPayMethods[0]
        }
        // console.log(this.myPayMethods);
      })
    },
    //获取钱包数据
    getCurrencyAccountFun() {
      if (!this.isLogin) {
        return false
      }
      getCurrencyAccount({ type: 1 }).then((res) => {
        let dataRes = res.data.data

        this.WalletData = dataRes

        this.coinList = this.coinList.map((item) => {
          //匹配对应币种金额
          this.WalletData.forEach((child) => {
            if (child.symbol == item.symbol) {
              item.surplusNum = child.balance || 0
            }
          })
          return item
        })
      })
    },
    //获取汇率
    async getExChangeFun() {
      try {
        let dataRes = await getDataApi('1531553843420971009', {
          pageSize: -521,
        })

        this.exchangeData = dataRes.data.data.records
      } catch (err) {
        console.log(err)
      }
    },
    //下单
    buyCoin() {
      //提醒实名认证
      if (this.userInfo.real_name_status != '2') {
        this.goKycDialog = true
        return false
      }

      if (this.orderBooking) {
        return false
      }
      this.orderBooking = true

      let data = {
        coinCou: this.orderType == 'buy' ? this.targetValue : this.sourceValue,
        coinId:
          this.orderType == 'buy'
            ? this.currTarget.value
            : this.currSource.value,
        coinSymbol:
          this.orderType == 'buy'
            ? this.currTarget.label
            : this.currSource.label,
        countryId:
          this.orderType == 'buy'
            ? this.currSource.value
            : this.currTarget.value,
        fiatCurrencyAmount:
          this.orderType == 'buy' ? this.sourceValue : this.targetValue,
        fiatCurrency:
          this.orderType == 'buy'
            ? this.currSource.label
            : this.currTarget.label,
        payMethodId:
          this.orderType == 'buy' ? this.currPayWay.id : this.currSellWay.id,
        type: this.orderType == 'buy' ? 1 : 2,
        serviceType: '1',
      }
      console.log(data)
      if (!data.payMethodId) {
        if (this.orderType == 'buy') {
          this.$message({
            type: 'warning',
            message: this.currCoinLangFun('text_qxzzffs', 'popup_tips'),
          }) //请选择支付方式
        } else {
          this.$message({
            type: 'warning',
            message: this.currCoinLangFun('text_qxzskfs', 'popup_tips'),
          }) //请选择收款方式
        }

        //清除loading

        this.orderBooking = false

        return false
      }

      newCommonOrder(data)
        .then((res) => {
          console.log(res)
          this.$message({
            type: 'success',
            message: this.currCoinLangFun('checkout_success', 'popup_tips'),
          }) //下单成功
          //更新钱包数据
          this.getCurrencyAccountFun()
          getServicePayment({ orderId: res.data.data }).then((dataRes) => {
            this.currOrderData = {
              id: res.data.data,
              ...dataRes.data.data,
            }
            this.currOpenOrderId = res.data.data
            this.businessChatDialog = true
          })

          this.sourceValue = ''
          this.targetValue = ''
          this.orderBooking = false
        })
        .catch(() => {
          this.orderBooking = false
        })
    },
    goKycFun() {
      this.goKycDialog = false
      this.$router.push({
        path: `/account/center/kyc`,
      })
    },
    computeSurplusNum(val) {
      if (!val) {
        return '0'
      }

      return `${toThousands(Number(val))}`
    },
    textClickFun(type) {
      let article_code =
        type == 'syxz'
          ? this.articleCode.syxz_article_code
          : this.articleCode.azgfzd_article_code
      if (article_code) {
        if (this.isSkipArticle) {
          return false
        }
        this.isSkipArticle = true
        //跳转文章
        getDataApi('1530431184536666113', {
          article_code: article_code,
          article_lang: this.language,
        })
          .then((res) => {
            this.isSkipArticle = false
            let data = res.data.data.records
            if (res.data.data.records.length > 0) {
              data = data[0]
              let routeData = this.$router.resolve({
                path: `/article/main/content/${data.article_type}/${data.id}`,
              })
              window.open(routeData.href, '_blank')
            }
          })
          .catch(() => {
            this.isSkipArticle = false
          })
      }
    },
  },
  computed: {
    ...mapGetters([
      'isLogin',
      'userInfo',
      'language',
      'exchange',
      'userVariation',
      'exchangeName',
    ]),
    AmountCheck() {
      if (this.orderType == 'buy') {
        if (this.sourceValue) {
          return true
        } else {
          return false
        }
      } else {
        if (this.sourceValue) {
          if (
            this.sourceValue > 0 &&
            this.sourceValue <= Number(this.currSource.surplusNum)
          ) {
            return true
          } else {
            return false
          }
        } else {
          return true
        }
      }
    },
    filterMyPayMethodsErr() {
      let arr = this.myPayMethods.filter((item) => item.data)
      if (arr.length) {
        let cArr = arr.filter(
          (item) => item.data.country_id == this.currTarget.value
        )
        if (cArr.length == 0) {
          return 1
          // "您的收款方式不支持当前所选法定代币,请前往个人中心更改您的收款方式";
        }
      } else {
        return 2
        // "您还没有收款方式，请前往个人中心添加";
      }
    },
    filterMyPayMethods() {
      return this.myPayMethods.filter(
        (item) => item.data && item.data.country_id == this.currTarget.value
      )
    },
    filterSourceSearch() {
      let reg = new RegExp(this.screenSourceInput, 'gi')
      return this.filterSource.filter((item) => item.label.match(reg))
    },
    filterTargetSearch() {
      let reg = new RegExp(this.screenTargetInput, 'gi')
      return this.filterTarget.filter((item) => item.label.match(reg))
    },

    filterSource() {
      let filterData = []
      if (this.orderType == 'buy') {
        filterData = this.countryList.map((item) => {
          item.label = item.local_currency
          item.value = item.id
          return item
        })

        filterData = filterData.filter((item) => item.is_buy == '1')
        return filterData
      } else {
        filterData = this.coinList.map((item) => {
          item.icon = item.avatar
          item.label = item.symbol
          item.value = item.id
          return item
        })

        filterData = filterData.filter((item) => item.is_sell == '1')
        return filterData
      }
    },
    filterTarget() {
      let filterData = []
      if (this.orderType == 'buy') {
        filterData = this.coinList.map((item) => {
          item.icon = item.avatar
          item.label = item.symbol
          item.value = item.id
          return item
        })

        filterData = filterData.filter((item) => item.is_buy == '1')
        return filterData
      } else {
        filterData = this.countryList.map((item) => {
          item.label = item.local_currency
          item.value = item.id
          return item
        })
        filterData = filterData.filter((item) => item.is_sell == '1')
        return filterData
      }
    },
    computedRate() {
      return toThousands(toNorounded(Number(this.exchangeNum), 8))
    },
    exchangeNum() {
      //当前币种兑法币的汇率
      let rate = 0
      if (this.orderType == 'buy') {
        this.exchangeData.forEach((item) => {
          if (
            item.quote_currency == this.currSource.local_currency &&
            item.base_currency == this.currTarget.symbol
          ) {
            rate = item.rate || 0
          }
        })
      } else {
        this.exchangeData.forEach((item) => {
          if (
            item.quote_currency == this.currTarget.local_currency &&
            item.base_currency == this.currSource.symbol
          ) {
            rate = item.rate || 0
          }
        })
      }

      return rate
    },
  },
}
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  align-items: center;
}

.max-w {
  margin: 0 auto;
  max-width: 1200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.otc-dropdown {
  width: 100%;
  .el-dropdown {
    width: 100%;
    .el-dropdown-link {
      cursor: pointer;
      box-sizing: border-box;
      width: 100%;
      border-radius: 2px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      padding: 11px 12px;
      .otc-symbol-img {
        font-size: 20px;
        height: 20px;
        display: inline-flex;
        margin-right: 8px !important;
      }
      .otc-symbol-name {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        margin-right: 8px;
      }
      .otc-symbol-icon {
        margin-left: auto;
        font-size: 16px;
        transition: all 0.3s;
        display: inline-block;
        &.transform {
          transform: rotate(180deg);
        }
      }
    }
  }
}

.main {
  box-sizing: border-box;
  min-height: calc(100vh - 517px);
  .main-body {
    min-width: 1248px;
    padding-bottom: 26px;
    padding-top: 48px !important;

    .main-content {
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #dde3e6;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding-right: 40px;
      .the-text {
        width: 510px;
        .ttile1 {
          line-height: 1;
          font-weight: 600;
          font-size: 48px !important;
        }
        .ttile2 {
          line-height: 24px;
          font-size: 20px !important;
          margin-top: 24px !important;
          margin-bottom: 24px !important;
        }
        .ttile3 {
          font-size: 14px !important;
          line-height: 20px;
          .link {
            text-decoration: none;
            cursor: pointer;
          }
        }
        .coinImg {
          margin-top: 64px;
          span {
            width: 32px;
            height: 32px;
          }
          span:nth-child(1) {
            background-image: url('');
          }
          span:nth-child(2) {
            background-image: url('');
          }
          span:nth-child(3) {
            background-image: url('');
          }
          span:nth-child(4) {
            background-image: url('');
          }
        }

        .title4 {
          line-height: 32px;
          font-weight: 600;
          font-size: 24px !important;
          margin-top: 16px !important;
          margin-bottom: 16px !important;
        }
        .title5 {
          margin-top: 16px !important;
          margin-bottom: 32px !important;
          font-size: 16px !important;
        }
        .instructions {
          display: flex;
          .instructions-btn {
            font-weight: 600;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px !important;
            text-decoration: none;
            cursor: pointer;
            &:last-child {
              margin-left: 16px !important;
            }
          }
        }
      }
      .buy-main {
        width: 488px;
        min-height: 580px;
        border: 1px solid;
        box-sizing: border-box;
        border-radius: 10px;
        position: relative;
        .buy-top-title {
          width: 100%;
          position: absolute;
          top: -28px;
          text-align: right;

          .right {
            text-decoration: none;
            cursor: pointer;
            line-height: 20px;
            font-size: 14px !important;
          }
        }
        .type-symbol {
          display: flex;
          font-weight: 600;
          height: 60px;
          .tab-btn {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 20px;
          }
        }
        .order-inputs {
          margin-top: 20px !important;
          padding: 22px 40px 24px 40px !important;

          .order-inputs-main {
            margin-top: 8px !important;
            .input-box {
              .title {
                font-size: 14px;
                margin-bottom: 6px;
              }
              .money-input {
                position: relative;
                .input-ontology {
                  &::-webkit-outer-spin-button,
                  &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                  }
                  &[type='number'] {
                    -moz-appearance: textfield;
                  }
                  &::placeholder {
                    color: #688199;
                  }
                  width: 100%;
                  height: 56px;
                  border-radius: 4px;
                  -webkit-box-sizing: border-box;
                  padding: 0 140px 0 15px;
                  font-size: 20px;
                  font-weight: 700;
                  box-sizing: border-box;
                  border: 1px solid;
                  overflow: visible;

                  &:focus {
                    outline: none !important;
                  }
                }

                .equivalent {
                  height: 56px;
                  position: absolute;
                  top: 0;
                  right: 10px;
                  display: flex;
                  align-items: center;
                  .box-line {
                    width: 1px;
                    height: 24px;
                  }
                  .otc-el-dropdown {
                    width: 100%;
                    height: 46px;
                    .el-dropdown-link {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      cursor: pointer;
                      img {
                        height: 20px;
                        margin-right: 8px !important;
                        padding-left: 8px;
                      }
                      .label {
                        width: 50px;
                        height: 46px !important;
                        line-height: 46px;
                        padding: 0;
                      }

                      .otc-symbol-icon {
                        transition: all 0.3s;
                        &.transform {
                          transform: rotate(180deg);
                        }
                      }
                    }
                  }
                }

                .tip-text {
                  margin-top: 8px !important;
                  font-size: 12px !important;
                  &.error-text {
                    color: #f5566f;
                  }
                }
              }
            }
            .target {
              margin-top: 20px;

              .text {
                margin-top: 10px !important;
                span:nth-child(1) {
                  line-height: 20px;
                  font-size: 14px !important;
                }

                span:nth-child(2) {
                  line-height: 16px;
                  font-size: 12px !important;
                }
              }
            }
          }

          .pay_way {
            margin-top: 24px !important;
            .pay_way_text {
              -webkit-box-pack: justify;
              justify-content: space-between;
              line-height: 16px;
              font-size: 12px !important;
              margin-top: 8px !important;
              margin-bottom: 8px !important;
            }
            .order-ways {
              .payment-area {
                display: flex;
                align-items: flex-start;
                .payment-trigger {
                  flex: 1;

                  .el-dropdown-link.active {
                    // border-color: #0020FD;
                  }
                }
              }

              .none-text {
                text-align: center;
                font-size: 16px;
                margin: 10px 0;
              }

              .commom-che {
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;

                .cc-item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 12px 0;
                  border-radius: 4px;
                  border: 1px solid;
                  position: relative;
                  margin-left: 14px;
                  flex: 0 0 159px;
                  text-align: center;
                  cursor: pointer;

                  & > img {
                    margin-right: 4px !important;
                    width: 16px;
                  }
                  &:nth-child(1) {
                    margin-left: 0px !important;
                  }

                  &.active {
                    border-color: #0020FD;
                  }

                  &.not-select {
                    color: #688199 !important;
                    cursor: not-allowed !important;
                  }
                  span {
                    line-height: 20px;
                    font-weight: 500;
                    font-size: 14px !important;
                  }
                  .fast_radio {
                    position: absolute;
                    right: -0.5px;
                    bottom: 0;
                    img {
                      width: 18px;
                      display: block;
                      border-style: none;
                    }
                  }
                }
              }
            }
          }
          .pay-button {
            margin-top: 40px !important;

            button {
              width: 100%;
              line-height: 44px;
              height: 44px;
              transition: none 0s ease 0s !important;
              font-size: 14px;
              outline: none;
              padding: 0 16px;
              border-radius: 4px;
              border-width: 1px;
              text-decoration: none;
              border-style: solid;
              cursor: pointer;
            }

            .loginBtn {
              &.is-loading,
              &:not([disabled='disabled']) {
                border-color: #4ec293;
                background-color: #4ec293;
                color: #f5faff;
                -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04),
                  0 2px 6px 0 rgba(0, 0, 0, 0.04);
                font-weight: 700;
                &:hover {
                  background-color: #247b59 !important;
                  border-color: #247b59 !important;
                }
              }

              &[disabled='disabled'] {
                cursor: not-allowed;
                color: #ffffff !important;
              }
            }

            .tjskfsBtn {
              border-color: #262d38;
              color: #0020FD;
              font-weight: 500;
              background-color: transparent;

              &:hover {
                color: #3a7ee6;
              }
            }
          }
        }
      }
    }
  }

  .three-steps-box {
    min-width: 1248px;

    .three-s {
      padding-top: 80px !important;
      padding-bottom: 80px !important;
      .title1 {
        text-align: center;
        line-height: 48px;
        font-weight: 600;
        font-size: 32px !important;
      }
      .title2 {
        margin-top: 16px !important;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        .three-min {
          border-radius: 14px;
          padding: 3px 12px;
          line-height: 16px;
          font-weight: 600;
          font-size: 12px !important;
          background-color: #4ec293;
        }
        span {
          font-size: 16px !important;
          margin-left: 8px !important;
        }
      }
      .step-img {
        margin-top: 70px;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .step {
          flex: 1;
          display: flex;
          align-items: center;

          .icon-bg {
            margin: 0px !important;
            width: 72px;
            height: 72px;
          }

          &:nth-child(1) .icon-bg {
            background: url('https://miniopic.baiyiex.com/baiyiex/public/ordinary/%E7%B2%BE%E7%81%B5%E5%9B%BE.png')
              no-repeat;
            background-size: 432px 72px;
          }
          &:nth-child(2) .icon-bg {
            background: url('https://miniopic.baiyiex.com/baiyiex/public/ordinary/%E7%B2%BE%E7%81%B5%E5%9B%BE.png')
              no-repeat -72px 0;
            background-size: 432px 72px;
          }
          &:nth-child(3) .icon-bg {
            background: url('https://miniopic.baiyiex.com/baiyiex/public/ordinary/%E7%B2%BE%E7%81%B5%E5%9B%BE.png')
              no-repeat -144px 0;
            background-size: 432px 72px;
          }

          .trans-png {
            padding: 0 6px;
            margin-right: 36px;
            img {
              height: 24px;
              -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
              display: block;
              border-style: none;
            }
          }
          .three-tw {
            width: 240px;
            margin-left: 24px !important;
          }
        }
      }
    }
    .my-advantage {
      min-width: 1248px;
      padding-top: 80px !important;
      padding-bottom: 80px !important;
      .title1 {
        text-align: center;
        line-height: 48px;
        font-weight: 600;
        font-size: 32px !important;
      }
      .advantage-detail {
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        text-align: center;
        margin-top: 64px !important;
        .detail {
          flex: 1;
          .icon-bg {
            margin: 0 auto !important;
            width: 72px;
            height: 72px;
          }

          &:nth-child(1) .icon-bg {
            background: url('https://miniopic.baiyiex.com/baiyiex/public/ordinary/%E7%B2%BE%E7%81%B5%E5%9B%BE.png')
              no-repeat -216px 0;
            background-size: 432px 72px;
          }
          &:nth-child(2) .icon-bg {
            background: url('https://miniopic.baiyiex.com/baiyiex/public/ordinary/%E7%B2%BE%E7%81%B5%E5%9B%BE.png')
              no-repeat -288px 0;
            background-size: 432px 72px;
          }
          &:nth-child(3) .icon-bg {
            background: url('https://miniopic.baiyiex.com/baiyiex/public/ordinary/%E7%B2%BE%E7%81%B5%E5%9B%BE.png')
              no-repeat -360px 0;
            background-size: 432px 72px;
          }

          p {
            width: 360px;
            margin: 0 auto;
            font-size: 16px !important;
            text-align: center;
          }

          p:nth-child(2) {
            line-height: 24px;
            font-weight: 500;
            font-size: 20px !important;
            margin-top: 48px !important;
            margin-bottom: 16px !important;
          }
        }
      }
    }
  }
}
.goKyc {
  .goKyc-tip {
    line-height: 20px;
    margin-bottom: 40px !important;
    margin-top: 0 !important;
  }
  .goKyc-bottom {
    justify-content: space-between;
    margin-bottom: 24px !important;
    .left {
      i {
        font-size: 24px;
      }
      span {
        font-weight: 600;
        font-size: 16px !important;
        margin-left: 4px !important;
      }
    }
    .right {
    }
  }
}
</style>
<style lang="scss">
.otc-dropdown-payment {
  width: 406px !important;
}

.theme-daytime {
  .payment-area {
    .otc-dropdown {
      border: 1px solid #eff0f2;
    }
    .service-item {
      border: 1px solid #eff0f2 !important;
    }
  }
  .otc-ordinary-box {
    .buy-main {
      background-color: #fff;
      border-color: #eff0f2 !important;
      box-shadow: 0 8px 32px rgba(26, 48, 82, 0.08),
        0 4px 8px rgba(26, 48, 82, 0.04);
      .type-symbol {
        .tab-btn {
          &.disactive {
            background-color: #f5f5f5;
            color: #b2bcc6;
          }
        }
      }
    }

    .order-inputs-main {
      .money-input {
        .input-ontology {
          background-color: #fff;
          border-color: #d8dfeb !important;
          caret-color: #0020FD;
          color: #10171f;
          &:hover {
            border-color: #2271e6 !important;
          }
          &:focus {
            border-color: #2271e6 !important;
            box-shadow: 0 0 0 2px rgba(82, 118, 235, 0.24);
          }
          &.input-error {
            border-color: #db2c49 !important;
          }
        }
      }
    }
  }
}
.theme-night {
  .payment-area {
    .otc-dropdown {
      border: 1px solid #262d38;
    }
    .service-item {
      border: 1px solid #262d38 !important;
    }
  }
  .otc-ordinary-box {
    .buy-main {
      background-color: #151d29;
      border-color: #262d38 !important;
      .type-symbol {
        .tab-btn {
          &.disactive {
            background-color: #2e3847;
            color: #b2bcc6;
          }
        }
      }
    }

    .order-inputs-main {
      .money-input {
        .input-ontology {
          background-color: #1f2733;
          border-color: #384252 !important;
          caret-color: #0020FD;
          color: #dde3e6;
          &:hover {
            border-color: #0020FD !important;
          }
          &:focus {
            border-color: #0020FD !important;
            box-shadow: 0 0 0 2px rgba(82, 118, 235, 0.24);
          }
          &.input-error {
            border-color: #f5566f !important;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-dropdown-menu {
  width: 238px;
  max-height: 400px;
  overflow-y: scroll;
  li {
    display: flex;
    align-items: center;
    padding: 10px 24px !important;
    img {
      width: 20px;
      height: 20px;
      display: inline-flex;
      margin-right: 8px !important;
      border-style: none;
    }
    span {
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      margin-right: 8px;
    }
  }
}
</style>
